<template>
	<view class="fmain">
		<view class="frecommed">
			<view class="frecommed_text">
				— 热门推荐 —
			</view>
			<view class="frecommed_letter">
				HIGHLIGHTS
			</view>
			<view class="frecommed_img">
				<image @click="handleToDetail(item.id)" :src="item.cover_img" v-for="(item,index) in hot" mode=""></image>
			</view>
		</view>
		<view class="frecommed">
			<view class="frecommed_text">
				— 新品推荐 —
			</view>
			<view class="frecommed_letter">
				NEW ARRIVALS
			</view>
			<view class="frecommed_img">
				<image @click="handleToDetail(item.id)" :src="item.cover_img" v-for="(item,index) in news" mode=""></image>
			</view>
		</view>
		<view class="frecommed">
			<view class="frecommed_text">
				— 鲜花妙用 —
			</view>
			<view class="frecommed_letter">
				MAGICAL EFFECT
			</view>
			<!-- <view class="frecommed_img">
				<image @click="handleToDetail(item.id)" :src="item.cover_img" v-for="(item,index) in news" mode=""></image>
			</view> -->
		</view>
		<view class="effect_flower">
			<view class="eat" @click="handleToEat">
				食用花卉
			</view>
			<view class="decamicl" @click="handleToMedical">
				药用花卉
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hot:[],
				news:[]
			}
		},
		mounted() {
			this.getHot(),
			this.getNew()
		},
		props: {
			recommend: {
				type: Array,
				default () {
					return []
				}
			}
		},
		methods: {
			handleToEat(){
				uni.navigateTo({
					url:'../../pages/eat/eat'
				})
			},
			handleToMedical(){
				uni.navigateTo({
					url:'../../pages/medical/medical'
				})
			},
			handleToDetail(id){
				uni.navigateTo({
					url:`../../pages/detail/detail?id=${id}`
				})
			},
			getHot(){
				// 热门推荐 {{product-server}}/api/product/v1/hotProduct
				uni.$http.get('/product-server/api/product/v1/hotProduct').then(res=>{
					this.hot=this.getRandomArrayElements(res.data.data,3)
					// console.log(this.hot)
				})
			},
			getNew(){
				uni.$http.get('/product-server/api/product/v1/newProduct').then(res=>{
					this.news=this.getRandomArrayElements(res.data.data,3)
					// console.log(this.new)
				})
			},
			getRandomArrayElements(arr, count) {
			    var shuffled = arr.slice(0), i = arr.length, min = i - count, temp, index;
			    while (i-- > min) {
			        index = Math.floor((i + 1) * Math.random());
			        temp = shuffled[index];
			        shuffled[index] = shuffled[i];
			        shuffled[i] = temp;
			    }
			    return shuffled.slice(min);
			},

		}

	}
</script>

<style>
	.fmain {
		background-color: #FFFFFF;
		box-sizing: border-box;
	}

	.frecommed {
		text-align: center;
		margin-bottom: 40rpx;
	}
	.frecommed_text{
		font-size: 60rpx;
		margin-bottom: 20rpx;
	}
	.frecommed_letter{
	}
	.frecommed_img{
		display: flex;
		height: 220rpx;
		margin-top: 20rpx;
	}
	.frecommed_img image{
		flex: 1;
		height: 100%;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}
	.effect_flower{
		display: flex;
		justify-content: space-around;
		height: 200rpx;
		font-size: 40rpx;
		font-weight: bold;
		color: #000000;
		margin-bottom: 20rpx;
	}
	.eat{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 40%;
		background-color: #55efc4;
		border-radius: 10rpx;
		box-shadow: 0px 0px 12px 0px rgba(205, 205, 205, 0.7);
		
	}
	.decamicl{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 40%;
		background-color: #00cec9;
		border-radius: 10rpx;
		box-shadow: 0px 0px 12px 0px rgba(205, 205, 205, 0.7);
	}
</style>
